<template>
  <div>
    <div class="commentWrapper">
      <div class="meta">
        <span class="user">{{ commentItem.account.nickname }}</span>
        <span class="time">{{ commentItem.update_at | changeTime }}</span>
      </div>
      <!-- 组件自调用递归 -->
      <FloorItem 
      :commentItem="commentItem.parent" v-if="commentItem.parent" class="floorItem"
      @handleReply="handleReply"/>
      <div class="content">
        {{commentItem.content}}
      </div>
      <div class="pic"  v-if="commentItem.pics.length>0">
          <img 
          v-for="(item,index) in commentItem.pics"
          :key="index"
          :src="$axios.defaults.baseURL+item.url" alt="">
      </div>
      <a class="replyBtn" href="#cdj" @click="handleReply(commentItem)">回复</a>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name:"FloorItem",
  data(){
    return{
      sonId:{}
    }
  },
  props: {
    commentItem: {
      account: {},
      pics:[]
    }
  },
  filters: {
    changeTime(value) {
      return moment(value).format(`YYYY-MM-DD  hh:mm`);
    }
  },
  methods:{
    handleReply(item){
      this.$emit("handleReply",item)
    }
  }
}
</script>

<style lang="less" scoped>
.commentWrapper {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
    .meta {
      margin-bottom: 10px;
    .user {
      font-size: 12px;
      color: #999;
    }
    .time {
      font-size: 12px;
      color: #999;
    }
  }
  .content {
      font-size: 20px;
  }
  .replyBtn{
        position: absolute;
        bottom: 5px;
        right: 5px;
        font-size: 12px;
    }
    .pic{
        img{
            width: 80px;
            height:80px;
            margin-right: 10px;
            object-fit: cover;
        }
    }
}
</style>